<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top-tabar">
			<view class="arrow" @click="returing"></view>
			<view class="title-tbar">
				附近门店
			</view>
			<!-- 添加一个空的占位元素保持平衡 -->
			<view class="placeholder"></view>
		</view>
		
		<view class="search">
			<uni-search-bar class="uni-mt-10" radius="20" placeholder="输入想要搜索的内容"
			 clearButton="auto" cancelButton="none" @confirm="search" >
				
			 </uni-search-bar>
		</view>
		<view class="search-history">
			<text>历史记录：</text>
			<text class="his" v-for="i in 6">菲菲汽车美容院</text>
		</view>
		
		<navigator open-type="navigate" 
		url="/pages/VehicleMaintenance/NearbyStores/washCar/washCar"
		 class="card-info" v-for="i in 4">
			<view class="title-1">
				<view class="title-11">
					车百世汽车生活馆
				</view>
				<view class="number">
					556m
				</view>
			</view>
			<view class="title-2">
				<view class="score">
					<uni-rate size="18" :touchable="false" :value="3" @change="onChange" />
					<view class="score-number">
						{{score}}分
					</view>
					<view>
						销量：556
					</view>
				</view>
			</view>
			
			<view class="bottom-content">
				<view class="image">
					<image src="/static/nearbystores/ceshi.png" mode=""></image>
				</view>
				<view class="title-contain">
					<view class="tit-con-1">
						营业时间：周一至周五
					</view>
					<view class="tit-con-2">
						早上8:00-晚上22:00
					</view>
					<view class="tit-con-3">
						山阳区人民路与解放路交叉口
					</view>
				</view>
			</view>
		</navigator>
		<view class="bottom-tip">
			--暂无更多--
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

	const returing = () => {
		uni.navigateBack()
	}
	
	
	const search=(res)=>{
		uni.showToast({
			title: '搜索：' + res.value,
			icon: 'none'
		})
	}
	
	const score = ref(4)
	const rateValue  = ref(3)
	const onChange=(e)=> {
		console.log('rate发生改变:' + JSON.stringify(e))
		// console.log(this.rateValue);
	}
	
</script>

<style scoped lang="scss">
	.container {
			width: 100vw;
			height: 100vh;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			position: relative;
		}
		
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		
		.title-tbar {
			color: white;
			font-size: 36rpx;
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		
		.top-tabar {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			background-color: #3486fd;
			min-height: 320rpx;
			padding: 20rpx;
			position: relative;
		}
		
		.arrow {
			border-top: 2rpx solid white;
			border-right: 2rpx solid white;
			height: 17rpx;
			width: 17rpx;
			margin-top: 15rpx;
			transform: rotate(225deg);
			flex-shrink: 0;
			z-index: 10;
			
			/* 添加点击效果 */
			&:active {
				opacity: 0.7;
				transform: rotate(225deg) scale(0.95);
			}
		}
		
		.placeholder {
			width: 20rpx;
			height: 20rpx;
			visibility: hidden;
			
		}
		
		.search{
		
			position: relative;
			margin-top: -280rpx;
			// border-radius: 50rpx;
		} 
	.search-result {
			padding-top: 10px;
			padding-bottom: 20px;
			text-align: center;
		}
	
		.search-result-text {
			text-align: center;
			font-size: 14px;
			color:#666;
		}
	
		.example-body {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 0px;
		}
	
		.uni-mt-10 {
			margin-top: 10px;
		}
		
		
		.search-history{
			position: relative;
			color: white;
			margin-left: 25rpx;
			font-size: 30rpx;
			// width: 500rpx;
			// background-color: #4bfd8d;
			// height: 200rpx;
		}
		.his{
			margin-left: 29rpx;
			font-size: 20rpx;
			
		}
		
		
		.card-info{
			position: relative;
			background-color: white;
			// width: 690rpx;
			margin: 20rpx 25rpx;
			border-radius: 30rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
			padding: 30rpx;
		}
		.number{
			font-size: 30rpx;
			color: #3486fd;
		}
		.title-1{
			display: flex;
			justify-content: space-between;
		}
		
		.score{
			display: flex;
			margin-top: 10rpx;
			font-size: 20rpx;
		}
		.score view{
			margin-right: 30rpx;
		}
		
		.bottom-content{
			margin-top: 20rpx;
			display: flex;
		}
		image{
			width: 230rpx;
			height: 150rpx;
			border-radius: 24rpx;
			margin-right: 30rpx;
		}
		.title-contain{
			// margin-left: 30rpx;
			font-size: 20rpx;
			padding: 10rpx;
		}
		.title-contain view{
			margin-bottom: 20rpx;
		}
		
		.bottom-tip{
			margin-top: 30rpx;
			font-size: 20rpx;
			text-align: center;
		}
</style>

